<template>
  <div>
    <el-card class="myCard">
        <el-form :model="addForm" label-width="100px" class="addForm">
            <el-form-item label="姓名">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-row :gutter="20" class="a">
                <el-col :span="14">
                  <el-input v-model="addForm.phoneNum"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary">发送验证码</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="验证码">
                <el-input v-model="addForm.idenCode"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-input v-model="addForm.depart"></el-input>
            </el-form-item>
            <el-form-item label="职务">
                <el-input v-model="addForm.posi"></el-input>
            </el-form-item>
            <el-form-item class="b">
              <el-button type="primary">确认添加档案</el-button>
            </el-form-item>
        </el-form>
      </el-card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            addForm: {
                name: '',
                phoneNum: '',
                idenCode: '',
                depart: '',
                posi: ''
            }
        }
    }
}
</script>

<style leang="less" scoped>
.addForm {
  width: 450px;
  height: 460px;
  background-color: #99CCFF;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.el-form-item {
  width: 400px;
}
.a {
  display: flex;
  justify: start;
}
.b {
  display: flex;
  justify-content: end;
}
.myCard {
  width: 600px;
  height: 600px;
  background-color: #99CCFF;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  border-color: black;
  border-width: 3px;
}
 .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>